<template>
  <el-container
    v-loading="loading"
  >
    <!-- 右侧菜单 -->
    <el-container>
      <!-- 功能按钮组 -->
      <el-header height="42px">
        <span class="ik-list-title">
          <span class="svg-container ik-list-icon">
            <svg-icon icon-class="database" />
          </span>
          数据列表
        </span>
        <!-- 测试菜单 -->
        <el-button-group class="ik-list-menu">
          <el-button class="ik-list-menu-btn" size="medium">新增</el-button>
          <el-button class="ik-list-menu-btn" size="medium">修改</el-button>
          <el-button class="ik-list-menu-btn" size="medium">详情</el-button>
          <el-button class="ik-list-menu-btn" size="medium">删除</el-button>
          <el-button class="ik-list-menu-btn" size="medium">导出</el-button>
        </el-button-group>
      </el-header>
      <el-main>
        <!-- 查询区 -->

        <!-- 数据表 -->
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="tableData"
          element-loading-text="加载中..."
          :stripe="true"
          :border="true"
          :fit="true"
          class="ik-list-table"
          height="100%"
          :header-row-class-name="'ik-list-table-header-row'"
          :header-cell-class-name="'ik-list-table-header-cell'"
          :row-class-name="'ik-list-table-body-row'"
          :cell-class-name="'ik-list-table-body-cell'"
          :highlight-current-row="true"
        >
          <ik-column-text
            code="code"
            name="编码"
            :edit="tableEditModel"
          />
          <ik-column-text
            code="name"
            name="名称"
            :edit="true"
          />
          <ik-column-text
            code="nickName"
            name="昵称"
            :edit="tableEditModel"
          />
          <ik-column-select
            code="sexSign"
            name="性别标识"
            key-field="key"
            value-field="value"
            :options="toJson(jsonStr.sexSign)"
            :edit="tableEditModel"
          />
          <ik-column-date
            code="birthDate"
            name="出生日期"
            :edit="tableEditModel"
          />
        </el-table>
      </el-main>

      <!-- 分页组件 -->
      <el-footer height="40px">
        <ik-pagination
          ref="ik_list_pagination"
          :page-no="pagination.pageNo"
          :page-size="pagination.pageSize"
          :total-count="pagination.totalCount"
        />
      </el-footer>
    </el-container>

  </el-container>
</template>

<script>
import IkPagination from '@/components/ik/pagination/IkPagination'
import IkColumnText from '@/components/ik/table/ikColumn/IkColumnText'
import IkColumnSelect from '@/components/ik/table/ikColumn/IkColumnSelect'
import IkColumnDate from '@/components/ik/table/ikColumn/IkColumnDate'

/*
import IkTableText from '@/components/ik/table/input/IkTableText'
import IkTableHidden from '@/components/ik/table/input/IkTableHidden'
import IkTablePassword from '@/components/ik/table/input/IkTablePassword'
import IkTableTime from '@/components/ik/table/input/IkTableTime'
import IkTableDate from '@/components/ik/table/input/IkTableDate'
import IkTableDatetime from '@/components/ik/table/input/IkTableDatetime'
import IkTableDatetimeTag from '@/components/ik/table/input/IkTableDatetimeTag'
import IkTableNumber from '@/components/ik/table/input/IkTableNumber'
import IkTableNumberTag from '@/components/ik/table/input/IkTableNumberTag'
import IkTableCheck from '@/components/ik/table/input/IkTableCheck'
import IkTableCheckTag from '@/components/ik/table/input/IkTableCheckTag'
import IkTableRadio from '@/components/ik/table/input/IkTableRadio'
import IkTableRadioTag from '@/components/ik/table/input/IkTableRadioTag'
import IkTableSelect from '@/components/ik/table/input/IkTableSelect'
import IkTableSelectTag from '@/components/ik/table/input/IkTableSelectTag'
import IkTableSwitch from '@/components/ik/table/input/IkTableSwitch'
import IkTableSwitchTag from '@/components/ik/table/input/IkTableSwitchTag'
import IkTableImage from '@/components/ik/table/input/IkTableImage'
import IkTableImageTag from '@/components/ik/table/input/IkTableImageTag'
import IkTableImageGroup from '@/components/ik/table/input/IkTableImageGroup'
import IkTableImageGroupTag from '@/components/ik/table/input/IkTableImageGroupTag'
import IkTableFile from '@/components/ik/table/input/IkTableFile'
import IkTableFileTag from '@/components/ik/table/input/IkTableFileTag'
import IkTableFileGroup from '@/components/ik/table/input/IkTableFileGroup'
import IkTableFileGroupTag from '@/components/ik/table/input/IkTableFileGroupTag'
import IkTableVideo from '@/components/ik/table/input/IkTableVideo'
import IkTableVideoTag from '@/components/ik/table/input/IkTableVideoTag'
import IkTableHtml from '@/components/ik/table/input/IkTableHtml'
import IkTableHtmlTag from '@/components/ik/table/input/IkTableHtmlTag'
import IkTableMd from '@/components/ik/table/input/IkTableMd'
import IkTableMdTag from '@/components/ik/table/input/IkTableMdTag'
import IkTablePopupList from '@/components/ik/table/input/IkTablePopupList'
*/

export default {
  components: {
    IkPagination,
    IkColumnText,
    IkColumnSelect,
    IkColumnDate
    /*
    IkTableText,
    IkTableHidden,
    IkTableText,
    IkTablePassword,
    IkTableNumber,
    IkTableNumberTag,
    IkTableDate,
    IkTableDatetime,
    IkTableDatetimeTag,
    IkTableTime,
    IkTableSwitch,
    IkTableSwitchTag,
    IkTableSelect,
    IkTableSelectTag,
    IkTableCheck,
    IkTableCheckTag,
    IkTableRadio,
    IkTableRadioTag,
    IkTableImage,
    IkTableImageTag,
    IkTableImageGroup,
    IkTableImageGroupTag,
    IkTableFile,
    IkTableFileTag,
    IkTableFileGroup,
    IkTableFileGroupTag,
    IkTableVideo,
    IkTableVideoTag,
    IkTableHtml,
    IkTableHtmlTag,
    IkTableMd,
    IkTableMdTag,
    IkTablePopupList
    */
  },
  props: {
  },
  data() {
    return {
      loading: false,
      listLoading: false,
      // 分页器
      pagination: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 5
      },
      // Json字符串
      jsonStr: {
        sexSign: '[{"key": "1", "value": "男"}, {"key": "2", "value": "女"}]'
      },
      // 编辑模式
      tableEditModel: false,
      // 表格数据
      tableData: [
        { 'code': '编码1', 'name': '名称1', 'nickName': '昵称1', 'sexSign': '1', 'birthDate': '2024-11-01' },
        { 'code': '编码2', 'name': '名称2', 'nickName': '昵称2', 'sexSign': '2', 'birthDate': '2024-11-02' },
        { 'code': '编码3', 'name': '名称3', 'nickName': '昵称3', 'sexSign': '1', 'birthDate': '2024-11-03' },
        { 'code': '编码4', 'name': '名称4', 'nickName': '昵称4', 'sexSign': '2', 'birthDate': '2024-11-04' },
        { 'code': '编码5', 'name': '名称5', 'nickName': '昵称5', 'sexSign': '1', 'birthDate': '2024-11-05' },
        { 'code': '编码6', 'name': '名称6', 'nickName': '昵称6', 'sexSign': '2', 'birthDate': '2024-11-06' }
      ]
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
  },
  methods: {
    // 工具方法 - 转为json
    toJson(jsonStr) {
      return JSON.parse(jsonStr)
    }
  }
}
</script>

<style lang="scss" >
/* 布局样式 */
.el-aside {
  height: calc(100vh - 88px);
  width: 100%;
  border-right: 1px solid #1482f0;
}
.el-header, .el-footer {
  padding: 0px;
  background-color: #FFFFFF;
  border-color: #FFFFFF;
}
.el-header {
  height: 42px;
  border-bottom: 1px solid #1482f0;
}
.el-footer {
  height: 36px;
}

.el-main {
  height: calc(100vh - 82px - 90px);
  padding: 0px;
  text-align: center;
}

/* 树形菜单样式 */
.ik-list-tree-title {
  color: #1482f0;
  border: 0px;
  width: 100%;
  height: 42px;
  background-color: #FFFFFF;
  line-height: 40px;
  font-size: 14px;
}
.ik-list-tree-close {
  margin-right: 20px;
  float: right;
  font-size: 16px;
}
/* 树形菜单选中样式 */
.el-tree-node.is-current > .el-tree-node__content {
  background-color: #FFFFFF !important;
  color: #1482f0;
}
/* 树形菜单移入样式 */
.el-tree-node__content:hover {
  background-color: #F4F7FC !important;
  color: #1482f0;
}

/* 菜单样式 */
.ik-list-title{
  background-color: #FFFFFF;
  color: #1482f0;
  margin-left: 25px;
  width: 300px;
  height: 42px;
  line-height: 42px;
  font-size: 14px;
}
.ik-list-menu {
  margin-top: 3px;
  margin-left: 20px;
  float: right;
}
.ik-list-menu-btn {
  background-color: #1482f0;
  color: #FFFFFF;
  border-radius:25px;
}
.searcher{
  overflow: hidden!important;
}
.searcher .el-dialog__header{
  padding: 0px;
  display:none;
}

.searcher .el-dialog__body{
  padding: 0px;
  height: 100%;
}
</style>

<style lang="scss" scoped>
  .el-table{
    .el-table__fixed {
      height:auto !important;
      bottom:17px;
    }
    /* 表格样式 */
    .ik-list-table-header-cell {
      padding:0;
      height: 40px;
      line-height: 40px;
      background-color: #F4F7FC;
      color:#555555;
      border-color: #E7E7E7;

    }
    .ik-list-table-header-row {
      padding:0;
      height: 50px;
      line-height: 50px;
      background-color: #F4F7FC;
      color:#555555;
      border-color: #E7E7E7;
      th{
        padding:0;
      }

    }
    .ik-list-table-header-row .ik-list-table-header-cell> .cell{
      text-overflow:ellipsis ;
      white-space: nowrap;
    }
    .ik-list-table-body-row {
      padding:0;
      height: 45px;
      line-height: 45px;
    }
    .ik-list-table-body-row-hide {
      display: none;
    }
    .ik-list-table-body-cell {
      padding:0;
      // height: 40px;
      // line-height: 40px;
    }
  }
  /* 菜单样式 */
  .ik-table-menu {
    z-index: 2000;
    position: fixed;
    padding: 0px;
    color: #000000;
    border-radius: 5px;
    border: 1px solid #999999;
    background-color: #FFFFFF;
  }
  .ik-list-table{
    // overflow-x: scroll;
    ::v-deep.el-table__body-wrapper{
      //加上不显示
      height: calc(100% - 50px)!important;
    }
  }

  .ik-table-menu-item {
    padding-right: 20px;
    padding-left: 20px;
    width: 120px;
    height: 30px;
    cursor: pointer;
    border-radius: 5px;
    display: block;
    line-height: 30px;
    text-align: center;
  }
  li:hover {
    background-color: #1790ff;
    color: #FFFFFF;
  }
</style>
